import { useEffect } from "react";
import { NavBar, Space, Toast, Card } from 'antd-mobile'
// import styles from "./MapContainer.css";
import AMapLoader from "@amap/amap-jsapi-loader";
import { useNavigate } from "react-router-dom";
import { Image, List } from 'antd-mobile'
import style from '../map/index.module.css'
export default function MapContainer() {
    let map = null;
    const navigate = useNavigate()
    const back = () => navigate(-1)

    const users = [
        {
            avatar: 'https://img0.baidu.com/it/u=600722015,3838115472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
            title: '艺术展览',
            eleg: 'Merufest 2024',
            date: '2024-02-11',
            price: '289',
            addpei: '182参与者'
        },
        {
            avatar: 'https://img0.baidu.com/it/u=3677381888,3027116986&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=758',
            title: '专业研讨会',
            eleg: '项目研究标题实例',
            date: '2024-02-11',
            price: '免费',
            addpei: '381参与者'
        }
    ]

    useEffect(() => {
        AMapLoader.load({
            key: "98b1de11979880767b5a1567fd8ba1ad", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {
                const map = new AMap.Map("container", {
                    zoom: 10, //地图级别
                    center: [116.397428, 39.90923], //地图中心点
                    mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
                    viewMode: "2D", //设置地图模式
                });


                // const marker = new AMap.Marker({
                //     position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                //     title: "北京",
                // });
                // //将创建的点标记添加到已有的地图实例：
                // map.add(marker);
                const markerData = [
                    {
                        position: [116.4129111906589, 39.92739144094595],
                        name: '111'
                    },
                    {
                        position: [116.4129830550997, 39.923186177007004],
                        name: '222'
                    },
                    {
                        position: [116.41578576829083, 39.92230082510662],
                        name: '333'
                    },
                    {
                        position: [116.41585763273163, 39.918980652707155],
                        name: '444'
                    },
                    {
                        position: [116.41176135960613, 39.91831659875467],
                        name: '555'
                    },
                ]

                markerData.forEach((item) => {
                    const marker = new AMap.Marker({
                        position: item.position, //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        label: {
                            cotent: item.name,
                            offset: new AMap.Pixel(-10, -10),
                        }
                    });
                    //将创建的点标记添加到已有的地图实例：
                    map.add(marker);
                })

            })
            .catch((e) => {
                console.log(e);
            });

        return () => {
            map?.destroy();
        };
    }, []);

    return (
        <div>
            <NavBar onBack={back}>搜索附近活动</NavBar>
            <div
                id="container"
                //   className={styles.container}
                style={{ height: "400px" }}
            >
            </div>

            <Card title='附近活动'>

                {users.map((item, index) => (
                    <div className={style.liebiao} key={index}>
                        <Image style={{ width: '100px', height: '100px', borderRadius: '12px' }} src={item.avatar}></Image>
                        <div className={style.titles}>
                            <li style={{color:'#ccc'}}>{item.title}</li>
                            <li>{item.eleg}</li>
                            <li>{item.addpei}</li>
                        </div>

                        <div className={style.righttit}>
                            <li className={style.prices}>{item.price}</li>
                            <li style={{color:'#ccc'}}>{item.date}</li>
                        </div>

                    </div>
                ))}
                {/* <List>
                    {users.map((item,index) => (
                        <List.Item
                            key={index}
                            prefix={
                                <Image
                                    src={item.avatar}
                                    style={{ borderRadius: 20 }}
                                    fit='cover'
                                    width={40}
                                    height={40}
                                />
                            }
                            description={item.title}
                        >
                            {item.name}
                        </List.Item>
                    ))}
                </List> */}
            </Card>
        </div>

    );
}
